<template>
  <div>
    <div class="sonTab">
      <div v-for="(item,index) in subjectList" :key="index" v-text="item" @click="checkSubject(item)" :class="{focus:checkSubColor == item}">
      </div>
    </div>
    <div class="noStore" v-if="noStore"></div>
    <div class="page-loadmore">
      <div class="deleteManage" @click="manageArticle">管理</div>
      <div class="page-loadmore-wrapper" v-if="noLoadmore" ref="wrapper" :style="{ height: wrapperHeight + 'px' }">
        <mt-spinner v-show="list<1 && InitialLoading" color="#26a2ff"></mt-spinner>
        <mt-loadmore :top-method="loadTop" @translate-change="translateChange" @top-status-change="handleTopChange" :bottom-method="loadBottom"
          @bottom-status-change="handleBottomChange" :bottom-all-loaded="allLoaded" :auto-fill="false" ref="loadmore">
          <ul class="page-loadmore-list" v-if="list>0">
            <li v-for="(item,index) in articleList" :key="index" class="page-loadmore-listitem">
              <div class="checkboxCancel checkOne" v-if="checkboxShow">
                <input :id="item.id" type="checkbox" v-model="item.check" style="display:none;">
                <label :for="item.id" :class="{'isblue':item.check}" class="checkboxLabel" v-on:click="checkItem(index)"></label>
              </div>
              <img class="article-list-img" :src="item.cover" alt="获取失败">
              <router-link class="router" :to="{path:'/Video/VideoDetail',query:{id:item.id,checkVideo:true}}">
                <div class="article-list-content">
                  <p class="list-content-tt" v-text="item.title"></p>
                  <p class="list-content-intro" v-text="item.description"></p>
                </div>
              </router-link>
            </li>
          </ul>
          <div class="footer" v-if="checkboxShow">

            <div class="checkboxCancel">

              <input id="checkAll" type="checkbox" v-model="checkAll" style="display:none;">
              <label for="checkAll" class="checkboxLabel checkAll" @click="checkAllLabel"></label>
              <p style="margin-left:4rem;">全选</p>
            </div>
            <el-button type="danger" size="small" :disabled="delDis" class="deleteArticle" @click="deleteArticle">删除</el-button>
          </div>
          <div slot="top" class="mint-loadmore-top" style="text-align:center">
            <span v-show="topStatus !== 'loading'" :class="{ 'rotate': topStatus === 'drop' }">↓</span>
            <mt-spinner v-show="topStatus == 'loading'" color="#26a2ff"></mt-spinner>
          </div>
          <!-- <div v-if="allLoaded" style="text-align:center;">无更多内容了</div> -->
          <load-more v-if="allLoaded" :show-loading="false" :tip="$t('无更多内容了')" background-color="#fbf9fe"></load-more>
          <div slot="bottom" class="mint-loadmore-bottom">
            <span v-show="bottomStatus !== 'loading'" :class="{ 'is-rotate': bottomStatus === 'drop' }">↑</span>
            <span v-show="bottomStatus === 'loading'">
              <mt-spinner v-show="bottomStatus == 'loading'" color="#26a2ff"></mt-spinner>
            </span>
          </div>
        </mt-loadmore>
      </div>
    </div>
  </div>

</template>
<script>
  import {
    Tab,
    TabItem,
    ButtonTab,
    ButtonTabItem,
    LoadMore,
    Divider,
    Checklist
  } from "vux";
  import myArticle from './myArticle';
  import myVideo from './myVideo';
  import _ from 'lodash';

  import {
    getMyVideo_Axios, 
    deleteVideo_Axios,
    checkSubject_Axios,
    getSubject_Axios
  } from "./axios/api";
  import {
    log
  } from 'util';

  export default {
    components: {
      Tab,
      TabItem,
      ButtonTab,
      ButtonTabItem,
      LoadMore,
      Divider,
      Checklist,
      myArticle,
      myVideo,
    },

    methods: {

      //选择框
      change(val, label) {
        console.log('change', val, label)
      },
      //上拉加载
      handleBottomChange(status) {
        this.moveTranslate = 1;
        this.bottomStatus = status;
      },
      loadBottom() {
        this.handleBottomChange("loading"); //上拉时 改变状态码
        this.pageNum += 1;
        setTimeout(() => {
          //上拉加载更多 模拟数据请求这里为了方便使用一次性定时器
          if (this.pageNum < this.totalPage) {
            //最多下拉三次
            this.list += 10; //上拉加载 每次数值加10
          } else {
            this.allLoaded = true; //模拟数据加载完毕 禁用上拉加载
            console.log('this.allLoaded', this.allLoaded);
          }
          this.getVideo(this.list);
          this.handleBottomChange("loadingEnd"); //数据加载完毕 修改状态码
          this.$refs.loadmore.onBottomLoaded();
        }, 500);
      },
      handleTopChange(status) {
        this.moveTranslate = 1;
        this.topStatus = status;
      },
      translateChange(translate) {
        const translateNum = +translate;
        this.translate = translateNum.toFixed(2);
        this.moveTranslate = (1 + translateNum / 70).toFixed(2);
      },
      loadTop() {
        //下拉刷新 模拟数据请求这里为了方便使用一次性定时器
        this.handleTopChange("loading"); //下拉时 改变状态码
        this.pageNum = 1;
        this.allLoaded = false; //下拉刷新时解除上拉加载的禁用
        setTimeout(() => {
          this.getVideo(this.list);
          this.handleTopChange("loadingEnd"); //数据加载完毕 修改状态码
          this.$refs.loadmore.onTopLoaded();
        }, 500);
      },
      getVideo: function (size) {
        let userId = this.userId;
        getMyVideo_Axios(userId, size)
          .then(response => {
            this.articleList = response.data.data.content;
            if (this.totalPage == 0) {
              this.totalPage = response.data.data.totalPages;
            }
            this.articleList.forEach(element => {
              element.check = false;
            });
            if (this.articleList.length == 0) {
              this.noStore = true;
              this.noLoadmore = false;
            }
          })
      },
      getSubject: function () {
        getSubject_Axios()
          .then(response => {
            this.subjectList = response.data.data;
          })
      },
      manageArticle: function () {
        if (this.checkboxShow == false) {
          this.checkboxShow = true;
        } else {
          this.checkboxShow = false;
        }
      },
      //单选
      checkItem: function (index) {
        if (this.articleList[index].check == true) {
          this.articleList[index].check = false;
        } else {
          this.articleList[index].check = true;
        }
        //判断按钮disable
        function istrue(val) {
          return val.check == true;
        }
        let some = this.articleList.some(istrue);
        if (some == false) {
          this.delDis = true;
        } else {
          this.delDis = false;
        }

        //every判断是否已经全选
        function istrue(val) {
          return val.check == true;
        }
        let all = this.articleList.every(istrue);
        //如果未全选了，则全选按钮取消
        if (all == false) {
          this.articleList.forEach(element => {
            this.checkAll = false;

          });
          //如果全选了，则全选按钮选择上
        } else {
          this.articleList.forEach(element => {
            
            this.checkAll = true;
          });
        }
      },
      // 全选
      checkAllLabel: function () {
        function istrue(val) { //定义一个判断是否为true的函数
          return val.check == true;
        }
        let all = this.articleList.every(istrue); //使用every方法遍历
        if (all == false) {
          this.articleList.forEach(element => {
            element.check = true;
          });
        } else { //如果已全选，则取消所有选择
          this.articleList.forEach(element => {
            element.check = false;
          });
        }
        let some = this.articleList.some(istrue);
        if (some == false) {
          this.delDis = true;
        } else {
          this.delDis = false;
        }
      },
      //删除video按钮
      deleteArticle: function () {
        this.articleList.forEach(element => {
          if (element.check == true) {
            (this.data).push(element.id);
          }
        });
        this.data = {
          "vids": this.data
        }



        deleteVideo_Axios(userId, this.data).then(response => {
          console.log('response', response);
          if (response.body.status == 0) {
            this.$vux.toast.show({
              text: '删除收藏成功',
              width: '15rem',
              time: 600
            });
            this.checkboxShow = false;
            this.getVideo(this.list);
          }
        })
      },
      //刷新
      reload() {
        this.isRouterAlive = false
        this.$nextTick(() => (this.isRouterAlive = true))
      },
      //选择科目
      checkSubject(item) {
        this.checkSubColor = item;
        sessionStorage.setItem('subjectItem', item);
        let userId = this.userId;
        checkSubject_Axios(userId,item).then(response => {
            console.log('response', response);
            this.articleList = response.data.data.content;            
          })
      }
    },
    data() {
      return {
        //上拉加载
        pageNum: 0, //页码
        InitialLoading: true, //初始加载
        list: 10, //数据
        allLoaded: false, //数据是否加载完毕
        bottomStatus: "", //底部上拉加载状态
        wrapperHeight: 0, //容器高度
        topStatus: "", //顶部下拉加载状态
        translate: 0, //
        moveTranslate: 0,
        checkboxShow: false,
        labelPosition: '',
        error: '',
        checkAll: false,
        data: [],
        myArticle: 'myArticle',
        myVideo: 'myVideo',
        currentView: 'myArticle',
        stlle: 'myArticle',
        subjectList: [],
        delDis: true,
        totalPage: 0,
        articleList: [],
        userId: sessionStorage.getItem('id'),
        checkSubColor: '',
        noLoadmore: true,
        noStore: false,
      };
    },
    mounted() {
      let windowWidth = document.documentElement.clientWidth; //获取屏幕高度
      if (windowWidth > 768) {
        //这里根据自己的实际情况设置容器的高度
        this.wrapperHeight = document.documentElement.clientHeight - 130;
      } else {
        this.wrapperHeight = document.documentElement.clientHeight - 90;
      }
      this.getSubject();
      if (sessionStorage.getItem('subjectItem')) {
        this.checkSubject(sessionStorage.getItem('subjectItem'));
      } else {
        this.getVideo();
      }
    }
  };

</script>

<style lang="scss" scoped>
  .noStore {
    width: 100%;
    height: 78vh;
    background: url('../assets/collect.png')no-repeat;
    background-size: 100% 100%;
  }

  .focus {
    background: #fcd32d;
  }

  .sonTab {
    display: -webkit-box;

    overflow: scroll; // border-bottom: 1px solid #409EFF;
    background: #ffe57e;
    div {
      width: 20%;
      height: 4rem;
      line-height: 4rem;
      font-size: 1.2rem;
      color: #5f2500;
      border-right: 1px solid;
      border-image: -webkit-linear-gradient(#ffe57e, #409EFF, #ffe57e) 1 1;
      border-image: -moz-linear-gradient(#ffe57e, #409EFF, #ffe57e) 1 1;
      border-image: linear-gradient(#ffe57e, #409EFF, #ffe57e) 1 1; //   overflow-y: auto;
    }
  } //滚动条隐藏for Chrome
  .sonTab::-webkit-scrollbar {
    display: none
  }

  .deleteManage {
    position: absolute;
    top: 1rem;
    right: 2rem;
    width: 4rem;
    height: 4rem;
    font-size: 1.2rem;
    color: #fff;
  }

  .error {
    padding-left: 15px;
    line-height: 28px;
    color: #888;
    font-size: 12px;
  }

  .footer {
    position: fixed;
    bottom: 0;
    height: 4rem;
    display: flex;
    width: 100%;
    justify-content: space-between;
    background: #EBEEF5;
    animation-duration: 0.5s; //动画事件
    animation-fill-mode: both; //动画作用
    animation-name: fadeInDown; //动画名称
    .checkboxCancel {
      width: 7rem;
      margin: 1rem 0;

    }
    .deleteArticle {
      margin: 0.5rem 2rem;
    }

  }

  @keyframes fadeInLeft {
    //定义动画
    from {
      opacity: 0;
      transform: translate3d(-100%, 0, 0); //从左侧插入
    }
    to {
      opacity: 1;
      transform: none;
    }
  }

  @keyframes fadeInDown {
    from {
      opacity: 0;
      transform: translate3d(0, 100%, 0); //从侧插入
    }
    to {
      opacity: 1;
      transform: none;
    }
  }

  .checkboxCancel {
    display: flex;
    align-items: center;
    justify-content: space-between;

    animation-duration: 0.5s; //动画事件
    animation-fill-mode: both; //动画作用
    animation-name: fadeInLeft; //动画名称
    input[type="checkbox"]:checked+label {
      background: url("../assets/勾选.png") no-repeat;
      background-size: 100% 100%;
      border: none;
    }
    width: 4rem;
    .checkboxLabel {
      position: absolute;
      left: 1rem;
      display: inline-block;
      width: 2rem;
      height: 2rem;
      border-radius: 2rem;
      border: 1px solid #bababa;
      background-color: #fff;
    }
    p {
      font-size: 1.4rem;
    }
  }

  .page-title,
  .page-footer {
    text-align: center;
    position: absolute;
  }

  .page-title {
    top: 0;
    left: 0;
    width: 100%;
    height: 50px;
    line-height: 50px;
  }

  .page-footer {
    left: 0;
    bottom: 0;
    width: 100%;
    height: 40px;
    line-height: 40px;
  }

  .page-title+* {
    margin-top: 50px;
  }

  @media (min-width: 768px) {
    .page-title {
      height: 90px;
      line-height: 90px;
    }
    .page-title+* {
      margin-top: 90px;
    }
  }

  .page-loadmore-listitem {
    display: flex;
    height: 10rem;
    line-height: 10rem;

  }

  .page-loadmore-listitem {
    border-top: 5px solid #fbf3d0;
  }

  .page-loadmore-wrapper {
    overflow: scroll;
    text-align: center;

  }

  .page-loadmore-list {
    list-style: none;
    padding: 0;
    margin-bottom: 4rem;
    position: relative;

  } //文章列表图片
  .article-list-img {
    width: 7rem;
    height: 7rem;
    margin: 1.5rem;
    flex: 2;
  }

  .checkOne {
    flex: 1
  }

  .router {
    flex: 6;
  }

  .article-list-content {
    display: flex;
    flex: 2;
    flex-direction: column;
    margin: 1.5rem 0.5rem 1.5rem 1rem;
    .list-content-tt {
      flex: 1;
      line-height: 2rem;
      text-align: left;
      font-size: 1.4rem;
      font-weight: 600;
    }
    .list-content-intro {
      flex: 1;
      line-height: 2rem;
      text-align: left;
      font-size: 1.2rem;
      color: #bababa;
    }
    .list-content-time {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      flex: 1;
      line-height: 2rem;
      text-align: right;
      font-size: 1.2rem;
      color: #bababa;
      img {
        width: 2rem;
        height: 2rem;
        margin-left: 0.5rem;
      }
    }
  }

</style>
